<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">物资列表</span><br>
  </div>

  <div class="workContent">
    <div class="goodCard">
      <a-timeline>

        <recycle-scroller class="virtual-list" :buffer="55" style="height: 480px" :item-size="35" key-field="id"
                          :items="goodsList">
          <template v-slot="{ item }">
            <div style="height: 2px"></div>
            <a-timeline-item>
              <a-row>
                <a-col :span="22">
                  {{item.donor}}&nbsp;于&nbsp;{{item.createTime}}&nbsp;捐赠了&nbsp;{{item.count}}&nbsp;{{ item.type }}&nbsp;{{item.goodsName}}
                  <span v-if="item.phone&&item.phone != ''">，电话：{{item.phone}}</span>
                </a-col>
                <a-col :span="2">
                  <a-popconfirm title="确认删除吗？" ok-text="确认" cancel-text="取消" @confirm="removeGoods(item.id)">
                    <a style="color: red;" href="#">删除</a>
                  </a-popconfirm>
                </a-col>
              </a-row>
            </a-timeline-item>
          </template>
        </recycle-scroller>


      </a-timeline>
    </div>
  </div>
</template>

<script>
import infiniteScroll from "vue-infinite-scroll";

export default {
  directives: { infiniteScroll }
}
</script>

<script setup>
import {getDict, getGoods, removeGoodsApi} from "@/utils/file";
import {ref} from "vue";
import {message} from "ant-design-vue";

const goodsList = ref([])      //物资列表
const dictList = ref([])       //字典列表

function formatDate(time){
  let nyr = time.slice(0, 10)
  let sfm = time.slice(11,19)

  let newTime = nyr + ' ' + sfm

  return newTime;
}

function getGoodsList(){
  getDict('unit').then(res => {
    if (res.status == 200){
      console.log(res)
      dictList.value = res.data.data

      getGoods().then(res =>{
        if (res.status == 200){
          goodsList.value = res.data.data
          goodsList.value.forEach(e => {
            e.createTime = formatDate(e.createTime)

            dictList.value.forEach(d => {
              if (e.unit == d.dictId){
                e.type = d.dictValue
              }
            })
          })
          console.log(goodsList.value)
        }else{
          message.error('网络异常，请刷新后重试')
        }
        console.log(res)
      })
      console.log(dictList.value)
    }else{
      message.error('网络异常，请刷新后重试')
    }
  })
}
getGoodsList()

const removeGoods = function (id){
  let material = {
    id: id
  }
  removeGoodsApi(material).then(res => {
    if(res.status == 200){
      message.success('删除成功')
      getGoodsList()
    }else{
      message.error('删除失败')
    }
  })

}

</script>

<style scoped>
.workContent{
  width: 96%;margin: 25px auto;
  background-color: #FFFFFF;
  padding: 50px 50px 0 50px;
}
</style>

